<template>
    <view class="focus-search-list" v-if="searchList.length">
        <view
            class="seach-shop"
            @click="handleSearchShop"
            v-if="searchVal && showSearchShop"
        >
            <image :src="asyncImgs.images.search_shop_icon" mode="" />
            <text>{{$t('title.search')}}“{{ searchVal }}”{{$t('common.store')}}</text>
        </view>
        <view
            class="focus-search-item text-more-1"
            v-for="(item, index) in searchList"
            :key="index"
            @click="handleMatchItem(item)"
        >
            <view class="text-more-1">
                {{ splitStr(item).beforeStr
                }}<text class="color-grey">{{ searchVal }}</text
                >{{ splitStr(item).afterStr }}
            </view>
        </view>
    </view>
</template>

<script>
export default {
    props: {
        searchList: {
            type: Array,
            default: [],
        },
        searchVal: {
            type: String,
            default: "",
        },
        showSearchShop: {
            type: Boolean,
            default: false,
        },
    },
    data() {
        return {};
    },
    created() { },
    computed: {},
    methods: {
        // 分离字符串
        splitStr(val) {
            if (!val) return {};
            val = val.toString();
            let index = val.indexOf(this.searchVal);
            let beforeStr = "",
                afterStr = "";
            if (index == 0) {
                afterStr = val.substr(this.searchVal.length, val.length);
            } else {
                beforeStr = val.substr(0, index);
                afterStr = val.substr(index + this.searchVal.length, val.length);
            }
            return { beforeStr, afterStr };
        },
        // 点击搜索店铺
        handleSearchShop() {
            this.$emit("handleSearchShop");
        },
        // 点击搜索商品匹配项
        handleMatchItem(item) {
            this.$emit("handleMatchItem", { val: item });
        },
    },
};
</script>

<style scoped lang="scss">
.focus-search-list {
    width: 100%;
    display: flex;
    flex-direction: column;

    .seach-shop {
        margin-left: 36rpx;
        padding: 30rpx 0;
        border-bottom: 1rpx solid #f2f2f2;
        display: flex;
        align-items: center;
        font-size: 26rpx;
        font-weight: 400;
        color: #262626;
        image {
            width: 26rpx;
            height: 26rpx;
            display: block;
            margin-right: 15rpx;
        }
    }

    .focus-search-item {
        padding: 30rpx 0;
        padding-left: 36rpx;
        border-bottom: 1rpx solid #f2f2f2;
        display: flex;
        align-items: center;
        font-size: 26rpx;
        font-weight: 400;
        color: #999999;
        .color-grey {
            color: #262626;
        }
    }
}
</style>
